

import React, { useRef, useEffect } from 'react'

import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Link, withRouter } from 'react-router-dom';
import { reg } from '../../utils/validate';
import { toast } from '../../utils/common';
import { ajax } from '../../api';


const layout = {
    labelCol: {
        span: 4,
        offset: 1
    },
    wrapperCol: {
        span: 18,
        offset: 1
    }
}



function LoginCode(props: any) {
    console.log(props);
    const { location, history } = props
    const uForm: any = useRef()
    const [form] = Form.useForm()
    const onFinish = async (value: any) => {
        let { code, result, token }: any = await ajax.login(value)
        if (code == 200) {
            sessionStorage.setItem("autoken", token)
            localStorage.setItem("username", value.username)
            history.push("/main")
        }

    }
    const onFinishFailed = () => {
        toast.error("请输入有效的登录信息")
    }
    useEffect(() => {
        var username = new URLSearchParams(location.search).get("username")
        if (username) {
            form.setFieldsValue({ "username": username })
        } else {
            var username = localStorage.getItem("username")

            if (username) {
                form.setFieldsValue({ "username": username })
            }
        }
    }, [])

    return (
        <div>
            <Form
                name="norma_login"
                className='login-form'
                initialValues={{
                }
                }
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                {...layout}
                ref={uForm}
                form={form}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名:"
                    name="username"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input prefix={<UserOutlined className="site-from-item-icon" />} placeholder='请输入用户名' />
                </Form.Item>

                <Form.Item
                    label="密&emsp;码:"
                    name="password"
                    rules={[{ required: true, message: '请输入密码!' }, {
                        pattern: reg.pwd, message: "请输入6-16位数字加字母的密码"
                    }]}
                >

                    <Input.Password prefix={<LockOutlined className="site-from-item-icon" />} placeholder='请输入密码' />
                </Form.Item>



                <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
                    <Button type="primary" htmlType="submit" block >
                        登录
                    </Button>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
                    <div className='links' style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
                        <Link style={{ color: "#f50" }} to="/register" >没有帐号，立即注册</Link>
                        <Link to="/forgetpass">忘记密码？</Link>

                    </div>
                </Form.Item>

            </Form>
        </div>
    )
}


export default withRouter(LoginCode)